<template>
    <div>
        <Row>
            <Card>
                <Form :model="list" label-position="right" :label-width="80" inline>
                    <FormItem label="查询条件">
                        <DatePicker type="date" placeholder="请选择起始日期" style="width: 200px"></DatePicker>&nbsp;到&nbsp;
                        <DatePicker type="date" placeholder="请选择截止日期" style="width: 200px"></DatePicker>
                    </FormItem>
                    <FormItem label="订单状态" style="width: 200px">
                        <Select v-model="situation">
                            <Option v-for="item in situationList" :value="item.value" :key="item.value" placeholder="选择消息类别">{{ item.label }}</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="订单号" style="width: 200px">
                        <Input v-model="number" placeholder="请输入订单号" ></Input>
                    </FormItem>
                    <Button type="primary">查询</Button>
                    <Button type="primary">删除</Button>
                </Form>
                <Table border :columns="columns" :data="data"></Table>
                <Page :total="100" show-elevator show-sizer @on-change="changePage" @on-page-size-change="changeSize"></Page>

                <!--详情-->
                <Modal
                        v-model="showSeeModel"
                        title="详情"
                        cancel-text
                        ok-text="关闭"
                        width="800">
                    <Form :model="details" label-position="right" :label-width="130"  >
                        <Row>
                            <Col span="12">
                            <Form-item label="需求站类别">
                                <Input v-model="details.type" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="需求站名称">
                                <Input v-model="details.demand" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="需求站省份">
                                <Input v-model="details.province" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="需求站城市">
                                <Input v-model="details.city" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="需求站地址">
                                <Input v-model="details.address" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="需求站电话">
                                <Input v-model="details.phone" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="接口标准">
                                <Input v-model="details.interface" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="储罐容量（m^3）">
                                <Input v-model="details.capacity" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="需求量（m^3）">
                                <Input v-model="details.amount" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="需求站负责人">
                                <Input v-model="details.person" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="需求时间">
                                <Input v-model="details.time" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="配送站名称">
                                <Input v-model="details.distribution" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="配送站负责人">
                                <Input v-model="details.person1" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="配送站地址">
                                <Input v-model="details.address1" readonly></Input>
                            </Form-item>
                            </Col>
                            <Col span="12">
                            <Form-item label="配送站电话">
                                <Input v-model="details.phone1" readonly></Input>
                            </Form-item>
                            </Col>
                        </Row>

                    </Form>
                </Modal>
            </Card>
        </Row>
    </div>
</template>
<script type="text/ecmascript-6">
    import api from '@/libs/util';
    export default {
        data() {
            return {
                list: {},
                number:'',
                situation:'',
                showSeeModel:false,
                details: {
                    type:'',
                    demand:'',
                    province:'',
                    city:'',
                    address:'',
                    phone:'',
                    interface:'',
                    capacity:'',
                    amount:'',
                    person:'',
                    time:'',
                    distribution:'',
                    person1:'',
                    address1:'',
                    phone1:'',
                },
                num:1,
                size:10,
                total:40,
                situationList: [
                    {
                        value:'submit',
                        label:'待提交',
                    },
                    {
                        value:'deal',
                        label:'待处理',
                    },
                    {
                        value:'distribution',
                        label:'待配送',
                    },
                    {
                        value:'service',
                        label:'待送达',
                    },
                    {
                        value:'get',
                        label:'待收气',
                    },
                    {
                        value:'complete',
                        label:'完成',
                    }
                ],
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '订单编号',
                        key: 'delivery_code',
                        render: (h, params) => {
                            return h('div', [
                                h('strong', params.row.delivery_code)
                            ]);
                        }
                    },
                    {
                        title: '创建时间',
                        key: 'create_time',
                        width: 150,
                        align: 'center',
                    },
                    {
                        title: '站点类型',
                        key: 'type'
                    },
                    {
                        title: '需求量（m^3）',
                        key: 'amount',
                        width: 150,
                        align: 'center',
                    },
                    {
                        title: '配送站名称',
                        key: 'distribution'
                    },
                    {
                        title: '需求站名称',
                        key: 'demand'
                    },
                    {
                        title: '接口标准',
                        key: 'interface'
                    },
                    {
                        title: '订单状态',
                        key: 'situation'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small',
                                        icon:'information-circled',
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.showSee();
                                        }
                                    }
                                }, '详情')
                            ]);
                        }
                    }
                ],
                data: [
                    {
                        delivery_code:'DD111111',
                        create_time: '2017-10-19 13:53:40',
                        type: '加气站',
                        amount:'77',
                        distribution:'一号配送站',
                        demand:'一号加气站',
                        interface:'国标',
                        situation: '待处理',
                    }
                ]
            }
        },
        methods: {
            showSee() {
                this.showSeeModel = true;
            },
            changePage(num) {
                this.num = num;
                this.getList(this.size,num)
            },
            changeSize(size) {
                this.size = size;
                this.getList(size,this.num)
            },
            getList(size,num) {
                let params = {
                    pageSite:size,
                    pageStart:num,
                };
                api.fetchPost(api.path.transferPage,params).then((data) => {
                    if(data.code = 10000){
                        this.$emit('hideLoading');
                        this.loading = false;
                        this.total = data.data.total;
                        this.data1 = data.data.data;
                    }else{
                        this.$Message.error(data.msg)
                    }
                }).catch(err => {
                    this.$emit('hideLoading');
                    this.$Message.error(err);
                })
            },
        }
    }
</script>
